<template>
    <div>
        <!-- 优惠券内容区域 start -->
        <van-tabs class="coupon-tab-sec" v-model="active" swipeable>
            <van-tab class="coupon-tab-item" v-for="(tab, index) in tabTitles" :key="tab.id" :title="tab.title">
                <coupon-list :couponList="couponListData[index]" :tabIndex="index"></coupon-list>
            </van-tab>
        </van-tabs>
        <!-- 优惠券内容区域 end -->
    </div>
</template>

<script>
    // 引入优惠券列表组件
    import couponList from "./couponList";

    export default {
        name: "couponTabItem",
        props: {
            tabTitles: {type: Array, default: () => []},        // tab名称数组
            couponListData: {type: Array, default: () => []},  // 优惠券列表数据
        },
        data() {
            return {
                active: 0
            }
        },
        components: {couponList}
    }
</script>

<style lang="less" scoped>
    /deep/.coupon-tab-sec {
        /* tab切换区域 */
        .van-tabs__wrap {
            width: 100%;
            height: 74px;
            /* tab切换底部条 */
            .van-tabs__line {
                width: 98px;
                height: 4px;
            }
        }
        /* 切换内容区域 */
        .coupon-tab-item {
            width: 100%;
            height: 1132px;
            background-color: #F3F3F3;
            overflow: auto;
        }
    }
</style>
